<template>
	<view class="protion-box">
		<view class="home-five-box" style="margin-top: 60rpx;margin-bottom: 30rpx;">
			<view class="copy">
				<view class="">
					
					{{$t('home.H104')}}
				</view>
				<view class="" @click="copy(`https://peaceplan.world/?code=${usreaddress}`)">
					Copy
				</view>
			</view>
			<view class="link">
				https://peaceplan.world/?code=
				<view class="">
					{{usreaddress}}
				</view>
			</view>
		</view>
		<view class="home-five-box">
			<view class="home-five-vedio">
				<view class="five-icon">
					<u-image src="@/static/hjpImg/teamLogo.png" width="64px" height="64px"></u-image>
				</view>
				<view class="five-user">{{getCaption(usreaddress)}} {{$t('home.H19')}}</view>
			</view>
			
			<view class="home-five-show">
				<view class="five-text">{{$t('home.H105')}}</view>
				<view class="five-rate">{{copyresult.Count1}}</view>
			</view>
			<view class="home-five-show">
				<view class="five-text">{{$t('home.H106')}}</view>
				<view class="five-rate">{{copyresult.Count2}}</view>
			</view>
			<view class="home-five-show">
				<view class="five-text">{{$t('home.H107')}}</view>
				<view class="five-rate">{{copyresult.Count3}}</view>
			</view>
		</view>
		<view class="home-six-box">
			<view  class="home-six-list">
				<view class="item-six-list">
					<view class="six-list-line"></view>
					<view class="six-list-count">{{copyresult.Direct}}</view>
					<view class="six-list-name">{{$t('home.H108')}}</view>
				</view>
			</view>
			<view  class="home-six-list">
				<view class="item-six-list">
					<view class="six-list-line"></view>
					<view class="six-list-count">{{copyresult.Indirect}}</view>
					<view class="six-list-name">{{$t('home.H109')}}</view>
				</view>
			</view>
			<view  class="home-six-list">
				<view class="item-six-list">
					<view class="six-list-line"></view>
					<view class="six-list-count">{{copyresult.Mint}}</view>
					<view class="six-list-name">{{$t('home.H110')}}</view>
				</view>
			</view>
			<view  class="home-six-list">
				<view class="item-six-list">
					<view class="six-list-line"></view>
					<view class="six-list-count">{{copyresult.Xsj}}</view>
					<view class="six-list-name">{{$t('home.H111')}}</view>
				</view>
			</view>
		</view>
		<view class="team-box">
			<view class="content-head">
				<view v-for="(item, index) in conList" :key="index" class="item-text">{{item}}</view>
			</view>
			<view class="content-footer">
				<view v-for="(itemes, indexData) in dataList" :key="indexData" class="content-items">
					<view class="items-one">{{itemes.Address}}</view>
					<view class="items-san"> {{itemes.Level == 1 ? $t('home.H112') : itemes.Level == 2 ? $t('home.H113') : $t('home.H114')}} </view>
					<view class="items-two">{{itemes.Mint}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCopy from '@/js_sdk/xb-copy/uni-copy.js'
	import {
		USDTController,
		USDT_contracts,
		contractsOBJ,
		controAdress
	} from '@/api/web3.js'
	import {number2string} from '@/api/help.js'
	import {myteam} from "@/api/home.js"
	export default {
		data() {
			return {
				usreaddress:"",
				copyresult:{},
				conList: [
					this.$t('home.H5'), this.$t('home.H6'), this.$t('home.H7'),
				],
				page: {
					currentPage: 0, //起始值
					pageSize: 20, //终止值
				},
				dataList: [],
				mockList: []
			};
		},
		
		onLoad() {
			uni.setNavigationBarTitle({
			    title: this.$t('home.H115')
			});
			this.usreaddress = uni.getStorageSync('account')|| '';
			this.getNumberreferrals();
		},
		computed:{
			
		},
		methods: {
			// 触发方法
			copy(cont) {
				uniCopy({
					content: cont,
					success: (res) => {
						uni.showToast({
							title: this.$t('home.H117'),
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
			//查询我的直推人数
			async getNumberreferrals(){
				let result = await myteam();
				this.copyresult = result.data;
				console.log(this.copyresult,'1111')
				this.dataList = [...this.dataList.list,...result.data.list];
				console.log(result,'result');
			},
			//触底事件
			onReachBottom() {
				console.log('zoule');
				if (this.copyresult.list.length < 18 ) {
					return;
				}
				
				this.page.currentPage = this.page.pageSize;
				this.page.pageSize = this.page.pageSize+20;
				setTimeout(() => {
					this.getNumberreferrals();
				}, 600);
			},
			// 格式化日对象
			getNowDate(timestamp){
			    let date = new Date(parseInt(timestamp))
			    // let date = new Date(parseInt(timestamp) * 1000)
			    let Year = date.getFullYear()
			    let Moth =
			      date.getMonth() + 1 < 10
			        ? "0" + (date.getMonth() + 1)
			        : date.getMonth() + 1
			    let Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate()
			    let Hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
			    let Minute =
			      date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
			    let Sechond =
			      date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds()
			    let GMT =
			      Year +
			      "-" +
			      Moth +
			      "-" +
			      Day +
			      "   " +
			      Hour +
			      ":" +
			      Minute +
			      ":" +
			      Sechond
			    return GMT
			}
			
		}
	}
</script>

<style lang="scss" scoped>
@import '@/static/css/common.scss';
.protion-box {
	width: 100%;
	.team-box {
		width: 323px;
		margin: 0 auto;
		margin-top: 30px;
		margin-bottom: 70px;
		padding-bottom: 80rpx;
		.content-head {
			@include flex-space-between(space-between, center);
			@include size(100%, 22px);
			@include font(12px, 400);
			color: #7A7A7A;
			line-height: 22px;
			text-align: center;
			.item-text:nth-child(2) {
				width: 30%;
			}
		}
		.content-footer {
			width: 100%;
			color: #fff;
			@include font(12px, 400);
			.content-items {
				@include flex-space-between(space-between, center);
				line-height: 22px;
				height: 22px;
				margin-top: 16px;
				text-align: center;
				.items-one {
					width: 30%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.items-two {
					width: 30%;
				}
			}
		}
	}
}
.home-five-box {
			padding: 40rpx 32rpx;
			width: 600rpx;
			margin: 0 auto;
			background: #161A33;
			border-radius: 10px;

			.itembox {
				margin-bottom: 20rpx;

				>view:nth-child(1) {
					display: flex;
					align-items: center;
					color: #8344E8;
					font-size: 34rpx;
					font-weight: bold;

					view:nth-child(1) {
						width: 10rpx;
						height: 10rpx;
						background: #8344E8;
						border-radius: 50%;
						margin-right: 20rpx;
					}
				}

				>view:nth-child(2) {
					margin-left: 30rpx;
					font-size: 24rpx;
					line-height: 2;
					letter-spacing: 4rpx;
				}

			}

			.home-five-vedio {
				width: 100%;
				height: 80px;
				background: rgba(255, 255, 255, 0.03);
				border-radius: 10px 10px 0px 0px;
				border: 1px solid rgba(151, 151, 151, 0.1);
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;
				margin-bottom: 28px;

				.five-icon {
					@include size(64px, 64px);
					margin: 0px 11px 0 16px;
					padding-top: 40px;
				}

				.five-user {
					font-size: 16px;
					color: #FFFFFF;
					margin-top: 10px;
				}
			}

			.home-five-show {
				@include flex-space-between(space-between, center);
				height: 20px;
				@include font(14px, 400);
				color: #FFFFFF;
				line-height: 20px;
				margin: 0px 24px 19px 16px;
					color: #ffffff95;
				.five-text {
					width: 145px;
					@include ellipse(1);
				}

				.five-rate {
					color: #fff;
				}
			}
			.copy{
				display: flex;
				align-items: center;
				view:nth-child(1){
					color: #ffffff95;
					letter-spacing: 3rpx;
				}
				view:nth-child(2){
					width: 112rpx;
					background: linear-gradient( 315deg, #DECAFF 0%, #691EE2 100%);
					border-radius: 40rpx;
					font-size: 26rpx;
					color: #FFFFFF;
					text-align: center;
					padding: 14rpx 0rpx;
					margin-left: 30rpx;
				}
			}
			.link{
				padding: 24rpx 0;
				border-top: 2rpx solid #706e7130;
				font-size: 32rpx;
				color: #FFFFFF;
				margin-top: 32rpx;
				view{
					width: 600rpx;
					overflow:hidden; //超出的文本隐藏
					text-overflow:ellipsis; //溢出用省略号显示
					white-space:nowrap; //溢出不换行
				}
			}
		}
		.home-six-box {
			margin: 0 auto;
			@include flex-space-between(space-between, center);
			flex-wrap: wrap;
			align-content: center;
			padding: 28rpx 42rpx;
		
			.home-six-list {
				width: 48%;
				background: #161A33;
				margin-top: 10px;
				border-radius: 8px;
				padding: 30rpx 0;
		
				.item-six-list {
					width: 143px;
					margin: 18px 0 17px 16px;
		
					.six-list-line {
						@include size(18px, 2px);
						background: #691EE2;
						margin-bottom: 16px;
					}
		
					.six-list-count {
						margin-bottom: 7px;
						@include size(100%, 21px);
						@include font(16px, 600);
						color: #FFFFFF;
						line-height: 21px;
					}
		
					.six-list-name {
						margin-bottom: 17px;
						@include size(100%, 21px);
						@include font(14px, 400);
						color: #808080;
						line-height: 21px;
					}
		
					.six-list-en {
						font-size: 12px;
						@include ellipse(1);
					}
				}
			}
		}
</style>
